<template>
  <div class="overhaul" id="overhaul">
      <searchBar></searchBar>
      <overhaulTable @showViewDialog="showViewDialog" @showAdd="showAdd" @showRule="showRule"></overhaulTable>
       <!-- 分页组件 -->
       <div class="common_pagination">
            <CommonPagination2 :pageNum="searchData.pageNum" :pageSize="searchData.pageSize" :pageTotal="total"
                @pageFunc="pageFunc" @sizeChange="sizeChange"></CommonPagination2>
        </div>
      <!-- 查看 -->
      <viewDetails :dialogVisible="dialogVisible" @closeDialog="closeDialog"></viewDetails>
      <!-- 新增 -->
      <addDialog :dialogVisible="addVisible" @closeDialog="closeAddDialog"></addDialog>
      <!-- 转派规则 -->
      <transferRulesDialog :dialogVisible="ruleVisible" @closeDialog="closeRuleDialog"></transferRulesDialog>
  </div>
</template>

<script setup lang="ts">
import searchBar from './components/searchBar.vue';
import overhaulTable from './components/table.vue';
import viewDetails from './components/viewDetails.vue';
import addDialog from './components/addDialog.vue';
import transferRulesDialog from './components/transferRulesDialog.vue';

let dialogVisible = ref(false);//是否打开查看弹窗
let addVisible = ref(false);//是否打开新增弹窗
let ruleVisible = ref(false);//是否打开转派规则弹窗

// 放置页码及相关数据
let searchData = reactive({
    pageNum: 1, //当前页
    pageSize: 10, //每页条目数
    params: {
        title: "", // 报警标题
        createTimeEnd: "", //结束时间
        createTimeStart: "",//开始时间
        msgType: null as any,//消息类型：1-通知公告，2-设备报警消息，3-网关报警消息
    }
})
let total = ref(0);

//打开查看弹窗
const showViewDialog = ()=>{
  dialogVisible.value = true;
}

//关闭查看弹窗
const closeDialog = ()=>{
  dialogVisible.value = false;
}

//打开新增弹窗
const showAdd = ()=>{
  addVisible.value = true;
}

//关闭新增弹窗
const closeAddDialog = ()=>{
  addVisible.value = false;
}

const showRule = ()=>{
  ruleVisible.value = true;
}

//关闭转派规则弹窗
const closeRuleDialog = ()=>{
  ruleVisible.value = false;
}

//页数改变事件(上一页,下一页,跳转到某一页)
const pageFunc = (pageNum: number) => {
    searchData.pageNum = pageNum;
   
}

//每页条数改变
const sizeChange = (pageSize: number) => {
  searchData.pageSize = pageSize;
  
}

</script>

<style lang="scss" scoped>
.overhaul {
  padding: 0px 15px;
  background-color: rgb(229, 229, 229);
  height: 100%;
  position: relative;
  .common_pagination {
        position: absolute;
        right: 50px;
        bottom: 40px;
    }
}
</style>
